<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>form表单</title>
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/weui.css" />
    <link rel="stylesheet" href="css/iconfont/iconfont.css" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery.js"></script>
    <script src="js/weui.js"></script>
    <script src="js/common.js"></script>
</head>

<body ontouchstart>
    <div class="page" id="msg">
        <div class="msgMain">
            <div class="msg_success">
                <div class="weui-msg">
                    <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
                    <div class="weui-msg__text-area">
                        <h2 class="weui-msg__title">操作成功</h2>
                        <p class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<a class="weui-wa-hotarea weui-link"
                                href="javascript:">文字链接</a></p>
                    </div>
                    <div class="weui-msg__opr-area">
                        <p class="weui-btn-area">
                            <a href="javascript:history.back();" role="button"
                                class="weui-btn weui-btn_primary">推荐操作</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="msg_warn">
                <div class="weui-msg">
                    <div class="weui-msg__icon-area"><i class="weui-icon-warn weui-icon_msg"></i></div>
                    <div class="weui-msg__text-area">
                        <h2 class="weui-msg__title">操作失败</h2>
                        <p class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<a class="weui-wa-hotarea weui-link"
                                href="javascript:">文字链接</a></p>
                    </div>
                    <div class="weui-msg__tips-area">
                        <p class="weui-msg__tips">提示详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<a class="weui-wa-hotarea weui-link"
                                href="javascript:">文字链接</a></p>
                    </div>
                    <div class="weui-msg__opr-area">
                        <p class="weui-btn-area">
                            <a href="javascript:history.back();" role="button"
                                class="weui-btn weui-btn_default">辅助操作</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="weui-footer">
            <p class="weui-footer__text">底部公司信息</p>
        </div>
    </div>
</body>
<script>
    $(document).ready(function () {
        $("#showActionSheet").on('click', function () {
            weui.actionSheet([
                {
                    label: '拍照',
                    onClick: function () {
                        console.log('拍照');
                    }
                },
                {
                    label: '从相册选择',
                    onClick: function () {
                        console.log('从相册选择');
                    }
                },
                {
                    label: '其他',
                    onClick: function () {
                        console.log('其他');
                    }
                }
            ], [
                {
                    label: '取消',
                    onClick: function () {
                        console.log('取消');
                    }
                },
                {
                    label: '确认',
                    onClick: function () {
                        console.log('取消');
                    }
                }
            ], {
                className: 'custom-classname',
                title: '请选择',
                onClickMask: function () {
                    console.log('点击了遮罩层');
                }
            });
        })
        $('#showPicker').on('click', function () {
            weui.picker([{
                label: '飞机票',
                value: 0
            }, {
                label: '火车票',
                value: 1
            }, {
                label: '的士票',
                value: 2
            }, {
                label: '公交票 (disabled)',
                value: 3
            }, {
                label: '其他',
                value: 4
            }], {
                onChange: function (result) {
                    console.log(result);
                },
                onConfirm: function (result) {
                    console.log(result);
                    $("#showPicker").val(result[0].label)
                },
                title: '单列选择器'
            });
        });
        $('#showDatePicker').on('click', function () {
            weui.datePicker({
                start: 2000,
                end: new Date().getFullYear(),
                onChange: function (result) {
                    console.log(result);

                },
                onConfirm: function (result) {
                    console.log(result);
                    let time = ''
                    result.filter(v => {
                        time += v.label
                    })
                    $('#showDatePicker').val(time)
                },
                title: '请选择时间'
            });
        });
        $(".weui-uploader__file__thumb").off('click').on('click', function (e) {
            e.stopPropagation()
            e.preventDefault()
            let imgUrl = $(this).eq(0).css('background-image').replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
            $("#bigImg").attr('src', imgUrl);
            $(".bigImgBox").fadeIn();
            $(".bigImgBox").off('click', '.icon-close-r').on('click', '.icon-close-r', function () {
                $(".bigImgBox").fadeOut();
            })
        });
        $(".weui-uploader__file__delete").off('click').on('click', function (e) {
            e.stopPropagation()
            e.preventDefault()
            var file = $(this).parent();
            weui.confirm('确定删除吗？', {
                title: '提示',
                buttons: [
                    { label: '取消', type: 'default' },
                    {
                        label: '确定', type: 'primary', onClick: function (e) {
                            debugger
                            file.remove()
                        }
                    }
                ]

            });
        });
    });
    function submitForm() {
        $.myToast({
            content: '提交成功',
            type: 'success',
            duration: 3000,
            callback() {
                //关闭回调
            }
        })
    }
</script>

</html>